
import "../../common/CSS/common.css"
import React,{useState}  from "react"
import { useNavigate,Router } from 'react-router-dom';
type DataValue={
    title:string,
    icon?:React.ReactElement,
    route?:React.HTMLAttributeAnchorTarget,
    children?:object[],
    extra?:any,
    extraStyle?:any,
    pageTitle?:object,
    outLink?:string,
    routeData?:object
}
interface nodeStruct{
    itemType:string,
    Data:DataValue,
    index?:number,
    setTitle:Function,
    clickEvent?:Function
}
/**
 * 左侧菜单列表组件
 * @param {'Title'|'Node'} itemType Title:菜单标题，Node:菜单选项
 * @param {Object} Data 渲染参数
 * @param {String} Data.title 菜单标题
 * @param {String} Data.icon 菜单ICON
 * @param {String} Data.route 目标路由
 * @param {Array} Data.children 子级菜单 
 * @param {Object} Data.extra 额外节点
 * @param {Number} index 层级 
 */
export function MenuItem({itemType,Data,index=1,setTitle,clickEvent}:nodeStruct){
    //let itemType=props.itemType
    //let Data:DataValue=props.Data
    //let index=props.index
    // 在组件中使用 useHistory() 获取 history 对象
    const navigate = useNavigate();
    function changeTo(route,pageTitle,routeData:any={}){
        if(Data.outLink){
            window.open(Data.outLink)
            return
        }
        console.log("set title",routeData)
        if(route){
            //存在跳转路由，请求关闭菜单栏
            window['closeMenu']()
            navigate(route,routeData)
        }
        if(pageTitle || pageTitle===false)
            setTitle(pageTitle)
    }
    let [openState,setOpen]=useState(false)
    function setChildState(){
        console.log(index)
        if(index>1){
            changeTo(Data.route,null,Data.routeData)
        }
        if(openState){
            setOpen(false)
        }else{
            setOpen(true)
        }
    }
    let domNode:React.ReactElement
    if(itemType==='Title'){
        domNode=<>
            <div className="splitBar"></div>
            <div className="menu-title" >{Data.title}</div>
        </>
    }else{
        let childNode:any
        if(Data.children){
            let nodeIndex=0
            childNode=Data.children.map((node:any)=>{
                nodeIndex++
                //二级菜单不用修改页面标题
                return <MenuItem setTitle={(pageTitle=null)=>{setTitle(pageTitle)}} itemType={node.itemType} Data={node.Data} index={index+1} key={nodeIndex}></MenuItem>
            })
        }
        domNode=
        <>
            <div className={`menu-item-${index} menu-item`} onClick={setChildState}>
                <>
                    {Data.icon?Data.icon:null}
                    <div className="menuTitle" style={{marginLeft:index==1?'16px': '32px'}} onClick={()=>{changeTo(Data.route,Data.pageTitle)}}>
                        {Data.title}
                    </div>
                    {Data.extra?<div className={Data.extraStyle.class} style={{transform:(openState && index==1)?'rotate(90deg)':'',...Data.extraStyle.css}}>{Data.extra}</div>:null}
                </>
            </div>
            {
                openState?
                    <div className="childContainer" style={{
                        height:(childNode || []).length*(index==1?40:30)+'px'
                    }}>
                        {childNode}
                    </div>
                    :
                    <div className="childContainer" style={{
                        height:'0px'
                    }}>
                    </div>
            }
            
        </>
        
    }
    
    return (
        domNode
    )
}